<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/contacts">
      <span>联系人</span>
      <template #icon="props">
        <img :src="props.active ? require('@/assets/images/baricon/lianxiren1.png') : require('@/assets/images/baricon/lianxiren.png')" />
      </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/personal">
      <span>个人中心</span>
      <template #icon="props">
        <img :src="props.active ? require('@/assets/images/baricon/personal1.png') : require('@/assets/images/baricon/personal.png')" />
      </template>
      </van-tabbar-item>
    </van-tabbar> 
  </div>
</template>
<script>
export default {
  data () {
    return {
      active:0,
      icon: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
      },
    }
  }
}
</script>
<style lang='less' scoped>
img {
  width: 20px;
  height: 20px;
}
</style>